<!--
 * @Description:
-->


<template>
	<view class="page_content">
		<view class="head_content">
			<CustomNavbar title="提现申请"></CustomNavbar>
			
		</view>
		<view class="main_content">
			<scroll-view scroll-y="true" class="forminner">
        <view class="form_box" >
          <view class="form_input">
            <view class="label">真实姓名</view>
            <input class="input" type="text" v-model="bankParams.real_name" placeholder="请输入真实姓名" placeholder-class="placeholder">
          </view>
          <view class="form_input">
            <view class="label">身份证号</view>
            <input class="input" type="text" v-model="bankParams.cer_code" placeholder="请输入身份证号" placeholder-class="placeholder">
          </view>
          <view class="form_input">
            <view class="label">银行卡号</view>
            <input class="input" type="text" v-model="bankParams.card_no" placeholder="请输入银行卡号" placeholder-class="placeholder">
          </view>
          <view class="form_input">
            <view class="label">银行卡预留手机号</view>
            <input class="input" type="text" v-model="bankParams.mobile" placeholder="请输入银行卡号" placeholder-class="placeholder">
          </view>
          <view class="form_input">
            <view class="label">身份证照片<text class="shili" :style="{'color':isColor}" 
            @click="exampleClick('cer_front_img_url')">查看示例</text></view>
            <view class="f c">
              <view class="upload">
                <view class="photo" v-if="bankParams.cer_front_img">
                  <image class="image" :src="imgParams.cer_front_img" mode="aspectFill" @click="previewImage('cer_front_img')"></image>
                  <view class="icon" @click="deleteImage('cer_front_img')">
                    <u-icon name="close" color="#fff" size="16"></u-icon>
                  </view>
                </view>
                <view class="tip" v-else @click="uploadImage('cer_front_img')">
                  <view>请上传身份证正面</view>
                </view>
              </view>
              <view class="upload m-l-30">
                <view class="photo" v-if="bankParams.cer_reverse_img">
                  <image class="image" :src="imgParams.cer_reverse_img" mode="aspectFill" @click="previewImage('cer_reverse_img')"></image>
                  <view class="icon" @click="deleteImage('cer_reverse_img')">
                    <u-icon name="close" color="#fff" size="16"></u-icon>
                  </view>
                </view>
                <view class="tip" v-else @click="uploadImage('cer_reverse_img')">
                  <view>请上传身份证反面</view>
                </view>
              </view>
            </view>
          </view>
          <view class="form_input">
            <view class="label">手持身份证照片 <text class="shili" :style="{'color':isColor}"
            @click="exampleClick('cer_show_front_img_url')">查看示例</text></view>
            <view class="upload">
              <view class="photo" v-if="bankParams.cer_show_front_img">
                <image class="image" :src="imgParams.cer_show_front_img" mode="aspectFill" @click="previewImage('cer_show_front_img')"></image>
                <view class="icon" @click="deleteImage('cer_show_front_img')">
                  <u-icon name="close" color="#fff" size="16"></u-icon>
                </view>
              </view>
              <view class="tip" v-else @click="uploadImage('cer_show_front_img')">
                <view>请上传 <br>手持身份证</view>
              </view>
            </view>
          </view>
          <view class="form_input">
            <view class="label">付款记录 <text class="shili" :style="{'color':isColor}"
            @click="exampleClick('sl_img_url')">查看示例</text></view>
            <view class="upload">
              <view class="photo" v-if="bankParams.screenshot_img">
                <image class="image" :src="imgParams.screenshot_img" mode="aspectFill" @click="previewImage('screenshot_img')"></image>
                <view class="icon" @click="deleteImage('screenshot_img')">
                  <u-icon name="close" color="#fff" size="16"></u-icon>
                </view>
              </view>
              <view class="tip" v-else @click="uploadImage('screenshot_img')">
                <view>请上传付款记录</view>
              </view>
            </view>
          </view>
        </view>
			</scroll-view>
      <u-popup :show="shilishow" mode="center" :round="4" :closeable="true" :closeOnClickOverlay="false" @close="shilishow = false">
      	<view class="mobile_popup">
      		<image class="hb_img" :src="hbImg" mode="widthFix"></image>
      	</view>
      </u-popup>
		</view>

		<view class="footer_content">
			<view class="button_box">
				<u-button text="保存信息" :loading="buttonLoading" :customStyle="buttonStyle" @click="submitHandle" />
			</view>
		</view>
    
	</view>
</template>

<script>
	import api from '@/common/request/api.js'
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	export default {
		data() {
			return {
				isColor:getApp().globalData.isColor,
				isBgColor:getApp().globalData.isBgColor,
				buttonStyle: {
					width: '100%',
					height: '108rpx',
					border: 'none',
					fontSize: '32rpx',
					color: '#fff',
					background: getApp().globalData.isBgColor,
					borderRadius: '16rpx',
					margin: '0',
					fontWeight: 'bold'
				},
				buttonLoading: false,
				bankParams: {
					real_name: '',
					card_no: '',
          type: 'bank',
          cer_code: '',
          cer_front_img: '', //身份证正面照 
          cer_reverse_img: '',  //身份证反面照
          cer_show_front_img: '',  //手持身份证
          mobile: '', //银行卡预留手机号
          screenshot_img: '' //付款记录
				},
        imgParams: {
          cer_front_img: '',
          cer_reverse_img: '',
          cer_show_front_img: '',
          screenshot_img: ''
        },
        shilishow: false,
        shiliObj: {},
        hbImg: ''
			}
		},
		computed: {
			...mapGetters("user", ["token", "userInfo"])
		},
		onLoad() {
      this.withdrawRule()
			this.playback()
		},
		methods: {
      ...mapMutations('user', ['setsignUrl']),
			// 账户信息回显
			playback() {
				this.$request('withdraw.account', { type: 'bank' }, false).then(res => {
					if(res.code === 1) {
             const { data } = res
						this.bankParams = {
              real_name: data.real_name,
              card_no: data.card_no,
              type: 'bank',
              cer_code: data.cer_code,
              cer_front_img: data.cer_front_img, 
              cer_reverse_img: data.cer_reverse_img,
              cer_show_front_img: data.cer_show_front_img,
              mobile: data.mobile,
              screenshot_img: data.screenshot_img 
            }
            this.imgParams = {
              cer_front_img: data.cer_front_img_url,
              cer_reverse_img: data.cer_reverse_img_url,
              cer_show_front_img: data.cer_show_front_img_url,
              screenshot_img: data.screenshot_img_url
            }
					} 
				})
			},
      // 提现规则
      withdrawRule() {
      	this.$request('withdraw.rule').then(res => {
      		if(res.code === 1) {
      			this.shiliObj= res.data
      		}
      	})
      },
      exampleClick(str) {
        this.shilishow = true
        this.hbImg = this.shiliObj[str]
      },
			// 提交
			submitHandle() {
			
				let obj = this.bankParams
        if(!obj.real_name) {
          this.$u.toast('请填写真实姓名')
          return
        }
        if(!obj.card_no) {
          this.$u.toast('请填写银行卡号')
          return
        }
        const verify = Object.values(obj).every(val => val !== null && val !== undefined && val !== '');
        if(!verify) {
          this.$u.toast('请完善收款信息')
          return
        }
				
				this.buttonLoading = true
      
        this.$request('withdraw.addAccount', obj).then(res => {
          
					if(res.code === 1) {
						this.$u.toast(res.msg)
            this.setsignUrl(res.data.signUrl)
            this.jumpView(`/pages/home/webViewSrc`)
            
						// const timer = setTimeout(() => {
						// 	this.$utils.navBack()
						// 	clearTimeout(timer)
						// }, 1500)
					}
					this.buttonLoading = false
				}).catch(err => {
					this.buttonLoading = false
				})
			},
			// 删除图片
			deleteImage(id) {
				uni.showModal({
					title: '提示',
					content: '确认要删除此项？',
					success: (res) => {
						if (res.confirm) {
              this.bankParams[id] = ''
              this.imgParams[id] = ''
            }
					}
				});
			},
			// 预览图片
			previewImage(id) {
				if(id) {
					uni.previewImage({
						urls: [this.imgParams[id]]
					});
				} 
			},
			// 上传图片
			uploadImage(id) {
				uni.chooseImage({
					count: 1,
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中...',
							mask: true
						})
						const uploadTask = uni.uploadFile({
							url: this.$BASE_URL + api.common.upload.url, 
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Token': this.token || '',
								'Sign': this.$SIGN || ''
							},
							success: uploadFileRes => {
								const file = JSON.parse(uploadFileRes.data)
								if(file.code == 1) {
									this.bankParams[id] = file.data.url
									this.imgParams[id] = file.data.fullurl
								} else {
									this.$u.toast(file.msg)
								}
								uni.hideLoading()
							},
							fail: fail => {
								uni.hideLoading()
								console.log("上传失败 =>", fail);
							}
						});
						
						uploadTask.onProgressUpdate(res => {
							console.log('上传进度' + res.progress);
							console.log('已经上传的数据长度' + res.totalBytesSent);
							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
  .shili {
    font-size: 24rpx;
    padding-left: 40rpx;
  }
  .forminner {
    height: 100%;
  }
	.page_content {
		padding-bottom: 60rpx;
		
		.head_content {
			.tabs_box {
				padding: 0 20rpx 10rpx;
			}
		}
		
		.main_content {
      height: 100%;
			overflow: hidden;
			
			.swiper_item {
				height: 100%;
				overflow-y: auto;
			}
			
			.form_box {
				padding: 24rpx 40rpx;
				
				.form_input {
					font-weight: 700;
					margin-bottom: 40rpx;
					
					.label {
						font-size: 36rpx;
						color: rgba(39, 45, 47, 1);
					}
					
					.input {
						height: auto;
						font-size: 32rpx;
						color: #000;
						padding: 20rpx 0;
						border-bottom: 2rpx solid rgba(221, 221, 221, 1);
					}
					
					.upload {
						margin-top: 28rpx;
						width: 260rpx;
						height: 196rpx;
						border-radius: 20rpx;
						background: #F4F5F7;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						
						.photo {
							width: 100%;
							height: 100%;
							position: relative;
							
							.image {
								width: 100%;
								height: 100%;
							}
							
							.icon {
								position: absolute;
								top: 10rpx;
								right: 10rpx;
								background: rgba(255, 0, 0, 1);
								padding: 4rpx;
								border-radius: 50%;
								opacity: 0.8;
							}
						}
						
						.tip {
							width: 100%;
							height: 100%;
							font-size: 28rpx;
							font-weight: normal;
							color: rgba(153, 153, 153, 1);
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
		
		.footer_content {
			padding: 0 40rpx;
		}
	}
</style>
